<template>
  <div class="container">
    <div class="header">
      <div class="header-title">供电安全生产指挥</div>
    </div>
    <div class="content">
      <health-gis @mapLoaded="mapLoaded" />
      <div v-if="trip.length" class="gis-notice">
        <img class="gis-notice-img" src="../../../../assets/images/jjxt/gz-home/notice.png" alt>
        <div class="gis-notice-text">
          <scroll
            :data="trip"
            :class-option="{limitMoveNum: 2, singleHeight: singleHeight, waitTime: 3000}"
            class="notice-seamless-scroll"
            style="height:100%;overflow:hidden;">
            <p
              v-for="(item, index) in trip"
              :key="index"
              class="gis-notice-text-item gis-notice-text-item-scroll">{{ getTripText(item) }}</p>
          </scroll>
        </div>
        <div class="gis-notice-warning">
          <img src="../../../../assets/images/jjxt/gz-home/warning1.png" alt class="gis-notice-warning-img">
          <span>{{ trip.length }}</span>
        </div>
      </div>
      <!-- <div class="gis-line-health">
        <div
          v-for="(item, index) in healthStatus"
          :key="index"
          class="gis-line-health-item">
          <span class="gis-line-health-item__num" :style="{background: item.color}">{{ item.value }}</span>
          <span class="gis-line-health-item__title">{{ item.title }}</span>
        </div>
      </div>-->
      <div class="gis-weather">
        <div class="gis-weather-arrow" @click="showWeather = !showWeather">
          <i
            class="el-icon-arrow-left"
            :style="{transform: showWeather ? 'rotate(180deg)' : 'rotate(0deg)'}" />
        </div>
        <transition name="transform">
          <div v-show="showWeather" class="gis-weather-items" style="float:left;">
            <div v-for="(item, index) in weather" :key="index" class="gis-weather-item">
              <p class="gis-weather-item__address">{{ item.cityAttr.cityName }}</p>
              <p class="gis-weather-item__detail">
                <img
                  :src="require(`../../../../assets/weather-icon/${weatherIconMap[item.wTypeAttr.wTypeName]}.png`)"
                  alt>
                <span style="margin: 0 5px;color: #43aef8;">{{ item.wTypeAttr.wTypeName }}</span>
                <span style="color: #43aef8;">{{ item.tempeature }}℃</span>
              </p>
            </div>
          </div>
        </transition>
      </div>
      <div class="content-right">
        <div :key="1" v-border class="content-right-item catenary" style="flex:1;height:0;">
          <div class="content-right-item__title" @click="showCatenery = !showCatenery">
            <span>接触网检修</span>
          </div>
          <transition name="translate-right">
            <div v-show="showCatenery" class="content-right-item__inner">
              <div class="content-right-item__table">
                <div class="content-right-item__thead">
                  <div class="content-right-item__td" style="flex:1;">工区</div>
                  <div class="content-right-item__td" style="flex:1;">线别</div>
                  <div class="content-right-item__td" style="flex:1;">计划号</div>
                  <div class="content-right-item__td" style="width:90px;">时间</div>
                  <div class="content-right-item__td" style="width:80px;">状态</div>
                </div>
                <div ref="catenary" class="content-right-item__tbody">
                  <scroll
                    :data="catenary"
                    :class-option="{limitMoveNum: limitMoveNum, step: 0.5}"
                    class="catenary-seamless-scroll"
                    style="height:100%;overflow:hidden;">
                    <div
                      v-for="(item, index) in catenary"
                      :key="index"
                      style="cursor: pointer;"
                      class="content-right-item__tr"
                      @click="routeToSkylight(item)">
                      <div
                        class="content-right-item__td"
                        style="flex:1;"
                        :title="item.shortName">{{ item.shortName }}</div>
                      <div
                        class="content-right-item__td"
                        style="flex:1;"
                        :title="item.seclineName">{{ item.seclineName }}</div>
                      <div
                        class="content-right-item__td"
                        style="flex: 1;"
                        :title="item.planCode">{{ item.planCode }}</div>
                      <div
                        class="content-right-item__td"
                        style="width:90px;">{{ `${parseTime(item.startTime, '{h}:{i}')}-${parseTime(item.endTime, '{h}:{i}')}` }}</div>
                      <div class="content-right-item__td" style="width:80px;">
                        <span
                          class="content-right-item__status"
                          :style="{background: item.completeFlag === 1 ? '#2ea15c' : (item.completeFlag === 2 ? '#1168a4' : 'red')}">{{ item.workProcess }}</span>
                      </div>
                    </div>
                  </scroll>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <!-- <div :key="2" class="content-right-item substation" style="height:150px;">
          <div class="content-right-item__title" @click="showCatenery = !showCatenery">
            <span>变电</span>
          </div>
          <transition name="translate-right">
            <div v-show="showCatenery" class="content-right-item__inner">
              <div class="content-right-item__table">
                <div class="content-right-item__thead">
                  <div class="content-right-item__td" style="flex:1;">工区</div>
                  <div class="content-right-item__td" style="flex:1;">工作内容</div>
                  <div class="content-right-item__td" style="width:80px;">状态</div>
                </div>
                <div class="content-right-item__tbody">
                  <el-scrollbar>
                    <div
                      v-for="(item, index) in substation"
                      :key="index"
                      class="content-right-item__tr">
                      <div class="content-right-item__td" style="flex:1;">{{ item.a }}</div>
                      <div class="content-right-item__td" style="flex:1;">{{ item.b }}</div>
                      <div class="content-right-item__td" style="width:80px;">
                        <span
                          class="content-right-item__status"
                          :style="{background: item.status ? '#2ea15c' : '#d89403'}">
                          {{ item.status ? '已完成' : '维修中' }}
                        </span>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <div :key="3" v-border="{1: false, 2: false}" class="content-right-item electricity" style="height:150px;">
          <div class="content-right-item__title" @click="showCatenery = !showCatenery">
            <span>电力配电</span>
          </div>
          <transition name="translate-right">
            <div v-show="showCatenery" class="content-right-item__inner">
              <div class="content-right-item__table">
                <div class="content-right-item__thead">
                  <div class="content-right-item__td" style="flex:1;">工区</div>
                  <div class="content-right-item__td" style="flex:1;">设备处所</div>
                  <div class="content-right-item__td" style="flex:1;">工作内容</div>
                  <div class="content-right-item__td" style="width:80px;">状态</div>
                </div>
                <div class="content-right-item__tbody">
                  <el-scrollbar>
                    <div
                      v-for="(item, index) in electricity"
                      :key="index"
                      class="content-right-item__tr">
                      <div class="content-right-item__td" style="flex:1;">{{ item.a }}</div>
                      <div class="content-right-item__td" style="flex:1;">{{ item.b }}</div>
                      <div class="content-right-item__td" style="flex:1;">{{ item.c }}</div>
                      <div class="content-right-item__td" style="width:80px;">
                        <span
                          class="content-right-item__status"
                          :style="{background: item.status ? '#2ea15c' : '#d89403'}">
                          {{ item.status ? '已完成' : '维修中' }}
                        </span>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </transition>
        </div>-->
        <!-- <div :key="4" class="content-right-item task-vehicle" style="height:150px;">
          <div class="content-right-item__title" @click="showTaskVehicle = !showTaskVehicle">
            <span>作业车</span>
          </div>
          <transition name="translate-right">
            <div v-show="showTaskVehicle" class="content-right-item__inner">
              <div class="content-right-item__table">
                <div class="content-right-item__thead">
                  <div class="content-right-item__td" style="flex:1;">工区</div>
                  <div class="content-right-item__td" style="flex:1;">车号</div>
                  <div class="content-right-item__td" style="flex:1;">停留点</div>
                  <div class="content-right-item__td" style="width:80px;">状态</div>
                </div>
                <div class="content-right-item__tbody">
                  <el-scrollbar>
                    <div
                      v-for="(item, index) in taskVehicle"
                      :key="index"
                      class="content-right-item__tr">
                      <div class="content-right-item__td" style="flex:1;">{{ item.a }}</div>
                      <div class="content-right-item__td" style="flex:1;">{{ item.b }}</div>
                      <div class="content-right-item__td" style="flex:1;">{{ item.c }}</div>
                      <div class="content-right-item__td" style="width:80px;">
                        <span
                          class="content-right-item__status"
                          :style="{background: item.status ? '#2ea15c' : '#d89403'}">
                          {{ item.status ? '已完成' : '维修中' }}
                        </span>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </transition>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import { parseTime } from '@/utils'
import Socket from '@/utils/socket'
import HealthGis from '../charts/health-gis'
import Scroll from 'vue-seamless-scroll'

// import { Point } from 'ol/geom'
// import Feature from 'ol/Feature'
// import { Vector as VectorLayer } from 'ol/layer'
// import { Vector as VectorSource } from 'ol/source'
// import {
//   Style,
//   Icon,
//   Fill,
//   Stroke,
//   Circle,
//   Text
// } from 'ol/style'
// import { getVectorContext } from 'ol/render'
// import { easeOut } from 'ol/easing'

const weatherIconMap = {
  小雨: 'light-rainy',
  小到中雨: 'light-rainy',
  中雨: 'moderate-rainy',
  中到大雨: 'moderate-rainy',
  大雨: 'heavy-rainy',
  大到暴雨: 'heavy-rainy',
  暴雨: 'heavy-rainy',
  暴雨到大暴雨: 'heavy-rainy',
  大暴雨: 'heavy-rainy',
  大暴雨到特大暴雨: 'heavy-rainy',
  特大暴雨: 'heavy-rainy',
  冻雨: 'heavy-rainy',
  阵雨: 'shower',
  雷阵雨: 'thunderstorm',

  雷阵雨伴有冰雹: 'thunderstorm',

  雨夹雪: 'sleet',
  小雪: 'light-snow',
  小到中雪: 'light-snow',
  中雪: 'heavy-snow',
  中到大雪: 'heavy-snow',
  大雪: 'heavy-snow',
  大到暴雪: 'heavy-snow',
  暴雪: 'heavy-snow',
  阵雪: 'heavy-snow',

  晴: 'sunny',
  多云: 'cloudy',
  阴: 'overcast',

  强沙尘暴: 'smog',
  扬沙: 'smog',
  沙尘暴: 'smog',
  浮尘: 'smog',
  雾: 'smog',
  霾: 'smog'
}

export default {
  name: 'PowerSupplyGis',
  components: { Scroll, HealthGis },
  directives: {
    border: {
      inserted(el, binding) {
        el.style.cssText += 'border: 2px solid #1f4175; border-radius: 9px;'

        const position = window.getComputedStyle(el).position
        if (!position || position === 'static') {
          el.style.position = 'relative'
        }

        const img = require('../../../../assets/images/jjxt/gz-home/home-block-corner.png')
        // 是否显示四个角
        let initialVal = { 1: true, 2: true, 3: true, 4: true }
        const { value } = binding
        initialVal = Object.assign(initialVal, value)

        if (initialVal[1]) {
          const ltCorner = document.createElement('img')
          ltCorner.src = img
          ltCorner.style.cssText = `position: absolute; left: -2px; top: -2px;`
          el.appendChild(ltCorner)
        }

        if (initialVal[2]) {
          const rtCorner = document.createElement('img')
          rtCorner.src = img
          rtCorner.style.cssText = `position: absolute; right: -2px; top: -2px; transform: rotate(90deg);`
          el.appendChild(rtCorner)
        }

        if (initialVal[3]) {
          const rbCorner = document.createElement('img')
          rbCorner.src = img
          rbCorner.style.cssText = `position: absolute; right: -2px; bottom: -2px; transform: rotate(180deg);`
          el.appendChild(rbCorner)
        }

        if (initialVal[4]) {
          const lbCorner = document.createElement('img')
          lbCorner.src = img
          lbCorner.style.cssText = `position: absolute; left: -2px; bottom: -2px; transform: rotate(-90deg);`
          el.appendChild(lbCorner)
        }
      }
    }
  },
  data() {
    return {
      singleHeight: 45,
      zoom: document.body.clientWidth / 1920,
      trip: [],
      tripStatus: [
        { label: '重合失败', value: 0 },
        { label: '重合成功', value: 1 },
        { label: '强送成功', value: 2 },
        { label: '强送失败', value: 3 }
      ],
      healthStatus: [
        { status: 1, title: '健康', value: 0, color: '#2ea15c' },
        { status: 2, title: '亚健康', value: 0, color: '#7db32b' },
        { status: 3, title: '轻度病态', value: 0, color: '#c7c11d' },
        { status: 4, title: '中度病态', value: 0, color: '#c7871e' },
        { status: 5, title: '重度病态', value: 0, color: '#c15818' },
        { status: 6, title: '失效', value: 0, color: '#f42929' }
      ],
      emergy: [],
      showWeather: true,
      weather: [],
      weatherIconMap: Object.freeze(weatherIconMap),
      showCatenery: true,
      catenary: [],
      limitMoveNum: 0,
      showSubstation: false,
      substation: [],
      showElectricity: false,
      electricity: [],
      showTaskVehicle: false,
      taskVehicle: [],
      parseTime: parseTime,
      markerSize: {
        height: '36px',
        width: '36px'
      },
      markerIcon: 'emergy-point',
      markerSizeEme: {
        height: '42px',
        width: '42px'
      },
      skyPic0:
        '',
      skyPic00:
        '',
      skyPic1:
        '',
      skyPic2:
        ''
    }
  },
  created() {
    this.initSocket()
  },
  mounted() {
    const height = this.$refs.catenary.offsetHeight
    this.limitMoveNum = Math.ceil(height / 45)
  },
  beforeDestroy() {
    console.log('进入beforeDestroy,map对象马上销毁')
    this.socket.ws.close()
    this.socket1.ws.close()
    // 销毁gis地图
    if (this.gisMapView) {
      try {
        this.gisMapView.destroy()
        this.gisMapView = null
      } catch (e) {
        this.gisMapView = null
      }
    }
    clearInterval(this.newPointTimer)
  },
  methods: {
    initSocket() {
      this.socket = new Socket()
      this.socket.open()

      this.socket.addEventListener('onopen', _ => {
        this.socket.sendMessage('PAGE_COMMAND')
      })
      this.socket.addEventListener('PAGE_COMMAND', data => {
        console.log('socket', data)
        switch (data.key) {
          case 'WEATHER':
            this.weather = Object.freeze(data.datas)
            break
          case 'HEALTH_INFO':
            this.healthStatus.forEach(item => {
              item.value = data.datas.filter(
                child => child.healthStatus === item.status
              ).length
            })
            break
          case 'EMETASK':
            this.emergy = Object.freeze(data.datas)
            break
          case 'TRIP_INFO_ALL':
            this.trip = Object.freeze(data.datas)
            this.$nextTick(() => {
              this.singleHeight = document.getElementsByClassName('gis-notice-text-item-scroll')[0].clientHeight
            })
            break
        }
      })

      var userInfo = getUserInfo()
      var replaceName = 'pspcgz' // 非六个段取值 pspcgz
      var pspcDeploy = ['gz', 'sz', 'cs', 'hk', 'hy', 'hh'] // pspc 目前部署单位
      if (userInfo && (pspcDeploy.indexOf(userInfo.abbreviation) !== -1)) {
        replaceName = 'pspc' + userInfo.abbreviation // 获取当前登录人所在单位标识abbreviation
      }
      this.socket1 = new Socket(replaceName)
      // this.socket1 = new Socket('pspc')
      this.socket1.open()

      this.socket1.addEventListener('onopen', _ => {
        this.socket1.sendMessage('PAGE_COMMAND')
      })
      this.socket1.addEventListener('PAGE_COMMAND', data => {
        console.log('socket1', data)
        switch (data.key) {
          case 'REPAIR_INFO':

            this.catenary = Object.freeze(data.datas)

            // 轮询gisMapView，如果存在，则添加天窗，并删除轮询
            // eslint-disable-next-line no-case-declarations
            const skyInterv = setInterval(() => {
              if (this.gisMapView) {
                console.log('mapLoaded已执行，现加载天窗数据')
                this.getSkyLight()
                clearInterval(skyInterv)
              } else { console.log('mapLoaded未执行') }
            }, 1000)

            break
        }
      })
    },
    mapLoaded(view) {
      // console.log('进入mapLoaded')
      if (!view.mapOBJ) {
        return false
      }

      this.gisMapView = view.mapOBJ

      // 报警层
      // eslint-disable-next-line no-undef
      const emergySource = new VectorSource()
      // eslint-disable-next-line no-undef
      this.gisMapView.emergyLayer = new VectorLayer({ source: emergySource })
      this.gisMapView.addLayer(this.gisMapView.emergyLayer)

      // 天窗层
      // eslint-disable-next-line no-undef
      const skyLightSource = new VectorSource()
      // eslint-disable-next-line no-undef
      this.gisMapView.skyLightLayer = new VectorLayer({
        source: skyLightSource,
        style: feature => {
          const flag = feature.get('completeFlag')
          const pictureName = flag === null ? '00' : flag
          const pictureURL = this['skyPic' + pictureName]
          const labelSTR = feature.get('workarea') + '-' + feature.get('planCode')
          // eslint-disable-next-line no-undef
          return new Style({
            // eslint-disable-next-line no-undef
            image: new Icon({
              src: pictureURL,
              scale: 0.8
            }),
            text: new Text({
              text: labelSTR,
              // offsetX: labelSTR.length*6,
              offsetY: -18,
              font: 'bold 12px Times New Roman',
              // eslint-disable-next-line no-undef
              fill: new Fill({
                color: 'red'
              }),
              // eslint-disable-next-line no-undef
              stroke: new Stroke({
                color: 'white',
                width: 3
              })
            })
          })
        }
      })
      this.gisMapView.addLayer(this.gisMapView.skyLightLayer)

      // 双击，沿用了之前的方法
      this.gisMapView.on('dblclick', event => {
        console.log(event)
        var features = this.gisMapView.getFeaturesAtPixel(event.pixel)
        if (features.length) {
          console.log(features[0])
          if (features[0].get('type') === 'skylight-point') {
            window.open(
              'pspc/data-playback?planId=' +
                features[0].get('dayPlanId') +
                '&completeFlag=' +
                features[0].get('completeFlag')
            )
          }
          if (features[0].get('type') === 'eme-point') {
            window.open('/pspc/commond-gis/?id=' + features[0].get('taskId'))
          }
        }
      })
    },
    getEmeAllPoint() {
      this.gisMapView.emergyLayer.getSource().clear()

      for (let index = 0; index < this.emergy.length; index++) {
        var taskDetail = {
          id: this.emergy[index].id,
          taskId: this.emergy[index].id,
          geoJson: this.emergy[index].geoJson,
          line:
            this.emergy[index].lineAttr && this.emergy[index].lineAttr.lineName
              ? this.emergy[index].lineAttr.lineName
              : '',
          address: this.emergy[index].address,
          desc: this.emergy[index].desc,
          influenceScope: this.emergy[index].influenceScope
        }

        console.log('getEmeAllPoint', taskDetail)
      }
    },
    getSkyLight() {
      // 先清除图层中的要素
      this.gisMapView.skyLightLayer.getSource().clear()

      var pointArr = []

      for (let i = 0; i < this.catenary.length; i++) {
        // 无坐标,则跳过
        if (!this.catenary[i].longitude || !this.catenary[i].latitude) {
          continue
        }

        var point = {
          lng: this.catenary[i].longitude,
          lat: this.catenary[i].latitude,
          workarea: this.catenary[i].deptName,
          planCode: this.catenary[i].planCode,
          leader: this.catenary[i].workLeader,
          worktime: this.catenary[i].workTime,
          process: this.catenary[i].workProcess,
          type: this.catenary[i].railType,
          completeFlag: this.catenary[i].completeFlag,
          dayPlanId: this.catenary[i].dayPlanId
        }
        // eslint-disable-next-line no-undef
        const pointGeom = new Point([
          this.catenary[i].mercatorX,
          this.catenary[i].mercatorY
        ])

        // 构造配置项
        const feaOpts = Object.assign({ geometry: pointGeom }, point)
        // eslint-disable-next-line no-undef
        const pointFea = new Feature(feaOpts)
        pointArr.push(pointFea)
      }

      this.gisMapView.skyLightLayer.getSource().addFeatures(pointArr)
      // pointArr.forEach(feature=>{
      //   this.flashPoint(feature)
      // })
    },
    routeToSkylight(row) {
      window.open(
        'pspc/data-playback?planId=' +
          row.dayPlanId +
          '&completeFlag=' +
          row.completeFlag
      )
    },
    getTripText(item) {
      const reclosureCondition = this.tripStatus.filter(
        child => child.value === item.reclosureCondition
      )[0]
      return `跳闸时间（${parseTime(item.tripTime, '{y}-{m}-{d} {h}:{i}')}）
              ${item.bdsAttr ? item.bdsAttr.bdsName || '' : ''}
              开关${item.switchFlag || ''}
              ${reclosureCondition ? reclosureCondition.label : ''}`
    },
    // 闪烁动效。目前未应用。
    flashPoint(feature) {
      const duration = 3000
      let start = new Date().getTime()

      // 这里的监听层可能要改变
      // const listenerKey = this.gisMapView.baseLayer.on('postrender', animate)
      const _this = this

      // eslint-disable-next-line no-unused-vars
      function animate(event) {
        // eslint-disable-next-line no-undef
        var vectorContext = getVectorContext(event)
        var frameState = event.frameState
        var flashGeom = feature.getGeometry().clone()
        var elapsed = frameState.time - start
        var elapsedRatio = elapsed / duration

        // radius will be 5 at start and 30 at end.
        // eslint-disable-next-line no-undef
        var radius = easeOut(elapsedRatio) * 25 + 5
        // eslint-disable-next-line no-undef
        var opacity = easeOut(1 - elapsedRatio)
        // eslint-disable-next-line no-undef
        var style = new Style({
          // eslint-disable-next-line no-undef
          image: new Circle({
            radius: radius,
            // eslint-disable-next-line no-undef
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, ' + opacity + ')',
              width: 0.25 + opacity
            })
          })
        })

        vectorContext.setStyle(style)
        vectorContext.drawGeometry(flashGeom)

        if (elapsed > duration) {
          // unByKey(listenerKey);
          start = new Date().getTime()
          // return;
        }
        // tell OpenLayers to continue postrender animation
        _this.gisMapView.render()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background: #0d1229 url(../../../../assets/images/jjxt/gz-home/big-screen-bg.png) no-repeat
    center/100% 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #fff;
  .header {
    height: 66px;
    background: url(../../../../assets/images/jjxt/gz-home/power-supply-header.png) no-repeat
      center bottom;
    position: relative;
    .header-title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 34px;
      font-weight: bold;
    }
    .header-left {
      float: left;
      line-height: 66px;
      font-size: 18px;
      font-weight: bold;
      color: #5fbdfd;
      margin-left: 20px;
    }
  }
  .content {
    flex: 1;
    height: 0;
    margin-top: 5px;
    background: #54d1f4;
    position: relative;
    .gis-notice {
      position: absolute;
      left: 15px;
      top: 10px;
      width: 670px;
      height: 45px;
      line-height: 45px;
      border: 2px solid #294067;
      border-radius: 10px;
      background-color: #122042;
      display: flex;
      align-items: center;
      .gis-notice-img {
        margin: 0 10px;
      }
      .gis-notice-text {
        flex: 1;
        width: 0;
        height: 100%;
        margin: 0 10px;
        .gis-notice-text-item {
          height: 45px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .gis-notice-warning {
        width: 85px;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #152e55;
        color: #f42929;
        font-weight: bold;
        text-align: center;
        img,
        span {
          vertical-align: middle;
          margin: 0 2px;
        }
      }
    }
    .gis-line-health {
      position: absolute;
      left: 15px;
      top: 70px;
      padding: 0 10px;
      border-radius: 4px;
      background: rgba($color: #122042, $alpha: 0.8);
      .gis-line-health-item {
        overflow: hidden;
        margin: 8px 0;
        font-size: 14px;
        span {
          vertical-align: middle;
        }
        .gis-line-health-item__num {
          display: inline-block;
          width: 22px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border-radius: 3px;
          margin-right: 10px;
        }
      }
    }
    .gis-weather {
      position: absolute;
      left: 15px;
      bottom: 0;
      z-index: 999;
      .gis-weather-arrow {
        float: left;
        width: 30px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 8px;
        font-size: 24px;
        color: rgba($color: #fff, $alpha: 0.5);
        background-color: rgba($color: #213161, $alpha: 0.8);
        cursor: pointer;
      }
      .gis-weather-item {
        float: left;
        width: 175px;
        height: 70px;
        text-align: center;
        border-radius: 8px;
        margin-left: 10px;
        background-color: rgba($color: #213161, $alpha: 0.8);
        img {
          width: 40px;
          vertical-align: middle;
        }
        .gis-weather-item__address {
          font-weight: bold;
          margin: 15px 0 0 0;
        }
      }
      .transform-leave-active,
      .transform-enter-active {
        transition: all 0.5s;
      }

      .transform-enter {
        opacity: 0;
        transform: translateX(-30px);
      }

      .transform-leave-to {
        opacity: 0;
        transform: translateX(-30px);
      }
    }
    .content-right {
      position: absolute;
      right: 5px;
      top: -10px;
      bottom: 50px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .el-scrollbar {
        height: 100%;
        /deep/.el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .content-right-item {
        // &.catenary{
        //   border-radius: 9px 9px 0 0 !important;
        //   border-bottom: 0 !important;
        // }
        &.substation {
          border-left: 2px solid #1f4175;
          border-right: 2px solid #1f4175;
          background: #0d1229;
          padding: 5px 0;
        }
        &.electricity {
          border-radius: 0 0 9px 9px !important;
          border-top: 0 !important;
        }
        .content-right-item__title {
          float: left;
          width: 45px;
          height: 100%;
          background: #162548;
          cursor: pointer;
          position: relative;
          span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            font-size: 20px;
            font-weight: bold;
          }
        }
        .content-right-item__inner {
          float: left;
          width: 435px;
          height: 100%;
          padding: 5px;
          background: #0e1933;
          .content-right-item__table {
            height: 100%;
            display: flex;
            flex-direction: column;
            .content-right-item__thead {
              color: #5fbdfd;
              border-bottom: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
              display: flex;
              align-items: center;
            }
            .content-right-item__tbody {
              flex: 1;
              height: 0;
            }
            .content-right-item__tr {
              border-bottom: 1px dashed rgba($color: #0e2ff8, $alpha: 0.4);
              display: flex;
              align-items: center;
            }
            .content-right-item__td {
              text-align: center;
              padding: 10px 0;
              line-height: 25px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .content-right-item__status {
                display: inline-block;
                width: 70px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                font-size: 14px;
                border-radius: 4px;
              }
            }
          }
        }

        .translate-right-enter-active,
        .translate-right-leave-active {
          transition: width 0.5s;
        }
        .translate-right-enter {
          width: 0;
        }
        .translate-right-leave-to {
          width: 0;
        }
      }
    }
  }
}
</style>
